<template>
  <div class="upload-container">
    <el-button icon="el-icon-upload" size="mini" @click="dialogVisible = true">
      图片上传
    </el-button>
    <el-dialog append-to-body :visible.sync="dialogVisible">
      <el-dialog width="30%" title="图片大小设置" :visible.sync="innerDialogVisible" append-to-body @closed="innerDialogClose">
        <el-form :inline="true" :model="imgStyle">
          <el-form-item label="图片宽度">
            <el-input
              v-model="imgStyle.imgWidthInput"
              placeholder="请输入图片宽度"
              @input="
                v => {
                  lockWh(v, 'imgHeightInput')
                }
              "
            >
              <span slot="suffix">px</span>
            </el-input>
          </el-form-item>
          <el-form-item label="图片高度">
            <el-input v-model="imgStyle.imgHeightInput" disabled placeholder="请输入图片高度">
              <span slot="suffix">px</span>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="addToContent">设置</el-button>
      </el-dialog>
      <el-upload :multiple="false" :file-list="fileList" :before-upload="beforeUpload" class="editor-slide-upload" action="" list-type="picture-card">
        <div slot="file" slot-scope="{ file }">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
          <span class="el-upload-list__item-actions">
            <el-tooltip class="item" effect="dark" content="复制图片地址" placement="top">
              <span class="el-upload-list__item-preview btn" :data-clipboard-text="file.url">
                <i class="el-icon-document-copy" />
              </span>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="插入当前图片至文本中" placement="top">
              <span @click="setImgStyle(file)">
                <!-- <span @click="addToContent(file.url)"> -->
                <i class="el-icon-circle-plus-outline" />
              </span>
            </el-tooltip>
          </span>
        </div>
        <el-button size="small" type="primary">
          点击上传
        </el-button>
      </el-upload>
      <el-progress v-if="IsUpload" class="mt-20" :text-inside="true" :stroke-width="26" :percentage="percentage" />
    </el-dialog>
  </div>
</template>

<script>
import { upFile } from '@/utils/obs'
import { Notification } from 'element-ui'
import ClipboardJS from 'clipboard'
export default {
  name: 'EditorSlideUpload',
  data() {
    return {
      dialogVisible: false,
      innerDialogVisible: false,
      percentage: 0,
      IsUpload: false,
      fileList: [],
      imgStyle: {
        imgWidthInput: 0,
        imgHeightInput: 0,
        imgRate: 0,
        url: null
      },
      imgUrl: process.env.VUE_APP_BASE_IMG_API
    }
  },
  mounted() {
    const clipboard = new ClipboardJS('.btn')

    clipboard.on('success', function(e) {
      Notification.success({
        title: '图片链接已复制'
      })
      e.clearSelection()
    })

    clipboard.on('error', function(e) {
      console.error('Action:', e.action)
      console.error('Trigger:', e.trigger)
    })
  },
  methods: {
    innerDialogClose() {
      this.innerDialogVisible = false
      this.imgStyle.imgWidthInput = 0
      this.imgStyle.imgHeightInput = 0
      this.imgStyle.imgRate = 0
      this.imgStyle.url = null
    },
    lockWh(proto, target) {
      this.imgStyle[target] = (proto * this.imgStyle.imgRate).toFixed(0)
    },
    // 设置图片宽高
    setImgStyle(file) {
      this.innerDialogVisible = true
      this.imgStyle.imgWidthInput = file.fileWidth
      this.imgStyle.imgHeightInput = file.fileHeight
      this.imgStyle.imgRate = file.fileHeight / file.fileWidth
      this.imgStyle.url = file.url
    },
    // 插入图片至富文本
    addToContent() {
      const { imgWidthInput, imgHeightInput, url } = this.imgStyle
      const style = `style="width: ${imgWidthInput}px; height:${imgHeightInput}px"`
      this.$emit('insert', url, style)
      this.innerDialogClose()
    },

    beforeUpload(file) {
      this.addFile(file)
      return false
    },
    async addFile(file) {
      const that = this
      this.IsUpload = true
      upFile(file, 'cms', 'pic', function(transferredAmount, totalAmount, totalSeconds) {
        that.percentage = parseInt((transferredAmount * 100) / totalAmount)
      }).then(res => {
        this.fileList.push({
          name: res.fileName,
          url: this.imgUrl + res.fileName,
          fileWidth: res.fileWidth,
          fileHeight: res.fileHeight
        })
        this.IsUpload = false
        this.percentage = 0
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.editor-slide-upload {
  margin-bottom: 20px;
  ::v-deep .el-upload--picture-card {
    width: 100%;
  }
}
</style>
